<%--
  Created by IntelliJ IDEA.
  User: 18327
  Date: 2021/4/13
  Time: 12:31
  To change this template use File | Settings | File Templates.
--%>
<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="description" content="description of your site" />
    <meta name="author" content="author of the site" />
    <title>管理员修改密码页面</title>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="../css/styles.css" />
    <link rel="stylesheet" href="../css/toastr.css" />
    <link rel="stylesheet" href="../css/fullcalendar.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/jquery.knob.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="../js/jquery.sparkline.min.js"></script>
    <script src="../js/toastr.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/jquery.peity.min.js"></script>
    <script src="../js/fullcalendar.min.js"></script>
    <script src="../js/gcal.js"></script>
    <script src="../js/setup.js"></script>
    <script type="text/javascript">


        $(function () {
            let regExp = /^[a-zA-Z][a-zA-Z0-9_$]{7,15}$/;// 6~16位以字母开头,数字下划线组合
            let flag1 = false;
            let flag2 = false;
            let flag3 = false;
            // 验证原始密码
            $("#originPwd").blur(function () {
                $.ajax({
                    url:"getOriginPwd?id="+$("#hiddenId").val()+"&pwd="+$("#originPwd").val(),
                    success(data) {
                        if(data == "原始密码验证成功!"){
                            $("#pwdMsg").attr("class","text-success");
                            /*alert(flag1)*/
                            flag1 = true;
                        }else{
                            $("#pwdMsg").attr("class","text-error");
                        }
                        $("#pwdMsg").html(data);
                    }
                });
            });
            // 验证新密码格式
            $("input[name='adminPassword']").blur(function(){
                if(regExp.test($(this).val())){
                    /*alert(flag2)*/
                    flag2 = true;
                }
            });
            // 确认新密码
            $("input[name='confirmpwd']").blur(function(){
                if($(this).val() == $("input[name='adminPassword']").val()){
                    /*alert(flag3)*/
                    flag3 = true;
                }
                if(flag1 && flag2 && flag3){
                    /*alert(${flag1 && flag2 && flag3})*/
                    $("#updateAdmin").attr({
                        "class":"btn btn-success",
                        "type":"submit"
                    });
                }else{
                    alert("NO OK!")
                    $("#updateAdmin").attr({
                        "class":"btn btn-success disabled",
                        "type":"button"
                    })
                }
            });
        })
    </script>
</head>
<body>
<%@include file="../header.jsp"%>
<div class="page">
    <div class="page-container">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <h4 class="header">修改管理员信息</h4>
                    <form action="updateAdmin" method="post" onsubmit="return confirm(this)">
                        <table class="table table-striped sortable">
                            <thead>
                            </thead>
                            <tbody>
                            <tr>
                                <th>管理员ID</th>
                                <td>${admin.id}<input id="hiddenId" type="hidden" name="id" value="${admin.id}"></td>
                            </tr>

                            <tr>
                                <th>管理员账号</th>
                                <td><input type="text" name="adminName"
                                           value="${admin.adminName}" readonly="readonly"/></td>
                            </tr>

                            <tr>
                                <th>原始密码</th>
                                <td><input id="originPwd" type="password"/><span id="pwdMsg" class="text-error"></span></td>
                            </tr>
                            <tr>
                                <th>新密码</th>
                                <td><input type="password" name="adminPassword"/></td>
                            </tr>
                            <tr>
                                <th>确认新密码</th>
                                <td><input type="password" name="confirmpwd"/></td>
                            </tr>
                            <tr>

                                <td></td>
                                <td><input id="updateAdmin" class="btn btn-success disabled"  type="button"
                                           value="修改" />&nbsp;&nbsp;&nbsp;<input class="btn btn-danger"
                                                                                 type="reset" value="重置" /></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>

                            </tbody>
                        </table>
                    </form>

                </div>
            </div>
        </div>

    </div>
</div>
<%@include file="../footer.jsp"%>
</body>
<script src="js/d3-setup.js"></script>
<script>
    protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
    address = protocol + window.location.host + window.location.pathname
        + '/ws';
    socket = new WebSocket(address);
    socket.onmessage = function(msg) {
        msg.data == 'reload' && window.location.reload()
    }
</script>
</html>
